<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="show" round z-index=104
            custom-style="width: 100%;background:#f9f9f9;overflow: hidden; height:70%">
            <view class="popup-content">
                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between; margin-bottom: 42rpx;">
                        <view class="popupTitle"> {{title}}</view>
                        <van-icon name="cross" size="15" @click="closePopup" />
                    </view>
                    <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80" show-scrollbar="false">
                        <view class="serviceRecords">

                            <view class="serviceRecords-item" v-for="(item,index) in serviceRecord" :key="index">
                                <!-- 服务信息 -->
                                <view class="serviceInfo">
                                    <view class="serviceItemTitle">服务信息</view>
                                    <view class="serviceInfoContent">
                                        <view class="serviceInfoLabel">服务地址： <span>{{ item.address }}</span></view>
                                        <view class="serviceInfoLabel">联系电话： <span>{{item.tel}}</span></view>
                                        <view class="serviceInfoLabel">服务时间： <span>{{item.date}}</span>
                                        </view>
                                    </view>
                                </view>
                                <!-- <view class="serviceRecords-item-line"></view> -->
                                <!-- 服务人员 Service Staff-->
                                <view class="serviceStaffInfo">
                                    <view class="serviceItemTitle">服务人员</view>
                                    <view class="serviceStaffInfoContent">
                                        <view class="serviceStaffImg"><img
                                                src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png"
                                                alt="" mode="widthFix"></view>
                                        <view class="serviceStaffText">
                                            <view class="staffName">{{item.serviceStaffName}} <span>{{item.serviceStaffWork}}</span></view>
                                        </view>
                                        <view class="serviceInfoTel"> <van-icon name="phone" siza="22" /> </view>
                                    </view>
                                </view>
                            </view>
                            <!-- <view class="serviceRecords-item" >
                                <view class="serviceInfo">
                                    <view class="serviceItemTitle">服务信息</view>
                                    <view class="serviceInfoContent">
                                        <view class="serviceInfoLabel">服务地址： <span>外滩首府 3号楼1单元201</span></view>
                                        <view class="serviceInfoLabel">联系电话： <span>1563262324</span></view>
                                        <view class="serviceInfoLabel">服务时间： <span>2024-12-13（周三）10:00-14:00</span>
                                        </view>
                                    </view>
                                </view>
                                <view class="serviceStaffInfo">
                                    <view class="serviceItemTitle">服务人员</view>
                                    <view class="serviceStaffInfoContent">
                                        <view class="serviceStaffImg"><img
                                                src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png"
                                                alt="" mode="widthFix"></view>
                                        <view class="serviceStaffText">
                                            <view class="staffName">刘甜甜 <span>8年工作经验</span></view>
                                        </view>
                                        <view class="serviceInfoTel"> <van-icon name="phone" siza="22" /> </view>
                                    </view>
                                </view>
                            </view> -->
                        </view>
                    </scroll-view>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },

    },
    data () {
        return {
            curS:0,
            curSName:'',
            date: '',
            showMark: true, // 标记
            title: '已服务记录',
            option: {},
            labelList:['金牌保姆','会开车','育儿经验'],
            serviceRecord:[
                {
                    recordId:21,
                    address:'外滩首府 3号楼1单元201',
                    tel:'1563262324',
                    date:'2024-12-13（周三）10:00-14:00',
                    serviceStaffName:'刘甜甜',
                    serviceStaffTel:'',
                    serviceStaffImg:'',
                    serviceStaffWork:'8年工作经验'
                },
                {
                    recordId:22,
                    address:'外滩首府 3号楼1单元201',
                    tel:'1563262324',
                    date:'2024-12-13（周三）10:00-14:00',
                    serviceStaffName:'刘甜甜',
                    serviceStaffTel:'',
                    serviceStaffImg:'',
                    serviceStaffWork:'8年工作经验'
                },
            ]


        }
    },

    computed: {
    },


  watch:{

  },
    onLoad () {
        if (this.house===0) {
            // this.title = '商品排序'
        } else{
            // this.title = '全部分类'
        }
      
    },
    onReady () { },

    methods: {
        // 关闭弹窗
        closePopup () {
            console.log('关闭 关闭关闭---------')
            this.$emit('closeRecord')
        },
  },

}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

::v-deep .van-button__text {
    display: flex !important;
    flex-direction: column !important;
}
// 最外层
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: -2;
    scrollbar-width: none;
    /* 针对Firefox */
}


// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}

// 提示框
.popup-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    scrollbar-width: none;
    overflow: hidden;
    background:#f9f9f9;

    padding:48rpx;
    border-radius: 16px;
    height: 100%;

    // padding-bottom: calc(0rpx + env(safe-area-inset-bottom));

    .popup-main {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: auto;
        // height: calc(100% - 30px);
        height: 100%;
    }


    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }

}


.serviceRecords{
   padding-bottom: calc(32rpx + env(safe-area-inset-bottom));

    .serviceRecords-item{
        background-color: #ffffff;
        padding: 24rpx 0rpx;
        margin-bottom: 28rpx;
    }
    .serviceRecords-item:last-child{
        margin-bottom: 0rpx;
    }
}
// 标题
.serviceItemTitle{
    font-size: 32rpx;
    text-align: left;
    color: #111111;
    line-height: 32rpx;
}
// 服务信息
.serviceInfo{
    // margin-top: 50rpx;
    // padding:0rpx 48rpx;
    // .serviceInfoTitle{
    //     font-size: 38rpx;
    //     text-align: left;
    //     color: #111111;
    //     line-height: 38rpx;
    // }
    padding: 0rpx 24rpx ;
    border-bottom: 1px solid #f9f9f9;

    .serviceInfoContent{
        margin-top: 50rpx;
        // padding-bottom: 49rpx;
        .serviceInfoLabel{
            font-size: 28rpx;
            line-height: 28rpx;
            text-align: left;
            color: #888888;
            margin-bottom: 32rpx;

            span{
                font-size: 28rpx;
                text-align: left;
                color: #111111;
                line-height: 28rpx;
            }
        }
    }
}
// 服务人员
.serviceStaffInfo{
    // padding:0rpx 48rpx;
    padding: 48rpx 24rpx ;

    .serviceStaffInfoContent{
        padding-top: 50rpx;
        // padding-bottom: 62rpx;
        display: flex;
        align-items: center;


        .serviceStaffImg{
            width: 15%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            img{
                width: 100%;
                height: auto;
            }
        }
        .serviceStaffText{
            margin-left: 44rpx;
            .staffName{
                font-weight: bolder;
                font-size: 38rpx;
                text-align: left;
                color: #111111;
                line-height: 38rpx; 
                display: flex;
                align-items: center;

                span{
                    font-weight: normal;
                    font-size: 26rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 26rpx;
                    padding-left:14rpx;
                }
            }
            .staffInfoLabel{
                display: flex;
                margin-top: 18rpx;

                .labelItem{
                    border: 1px solid #FF6203;
                    background-color: rgb(255, 98, 3, 0.06);
                    color: #FF6203;
                    font-size: 22rpx;
                    line-height: 22rpx;
                    text-align: center;
                    padding: 10rpx 22rpx;
                    border-radius: 25rpx;
                    margin-right: 16rpx;
                }
                .blueItem{
                    border: 1px solid #0094D9;
                    background-color: rgb(0, 148, 217, 0.06);
                    color: #0094D9;
                }
                .greenItem{
                    border: 1px solid #00CB00;
                    background-color: rgb(0, 203, 0, 0.06);
                    color: #00CB00;
                }
                .labelItem:last-child{
                    margin-right: 0rpx;
                }
            }
        }
        .serviceInfoTel{
            text-align: right;
            margin-left: 60rpx;
        }

    }
}

// 去绑定的按钮
.button{
    // width: 100%;
    font-size: 12px;
    color: #ffffff;
    height: 20px;
    line-height:20px;
    border-radius: 10px;
    border-style: initial !important;
    padding: 0 11px !important;
    background: #FF6203 !important;
    margin-left: 13px;
}


</style>

